<template>
	<view class="prescriptionBox">
		<view class="search">
			<u-search placeholder="请输入搜索的相关内容" v-model="keyword" :showAction='false' height="60" searchIconSize='60'
				borderColor='#5597FB' :inputStyle="{fontSize:' 30rpx'}" @search='searchPrescription'></u-search>
		</view>
		<view class="prescriptionList">
			<view class="prescriptionItem" v-for="(item,index) in 10">
				<view class="left">
					<image class="image" src="https://s1.ax1x.com/2022/09/29/xmzG1H.jpg"></image>
				</view>
				<view class="right">
					<view class="name">头孢克洛缓释胶囊</view>
					<view class="dosage">剂量:0.36g/粒X12粒/盒</view>
					<view class="usage">用法:2粒/次X3次/日</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//处方搜索关键字
				keyword: ''
			}
		},
		methods: {
			searchPrescription() {
				console.log(this.keyword)
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.prescriptionBox {
		background-color: #F8F8F8;
		position: relative;

		.search {
			width: -webkit-fill-available;
			position: fixed;
			top: 0;
			background-color: #FFFFFF;
			padding: 15rpx 30rpx;
		}

		.prescriptionList {
			padding: 100rpx 30rpx 20rpx;
			background-color: #F8F8F8;

			.prescriptionItem {
				margin-top: 20rpx;
				display: flex;
				height: 156rpx;
				background-color: #FFFFFF;

				.left {
					width: 244rpx;
					height: 100%;

					.image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 28rpx;
					color: #8E8E8E;
					line-height: 40rpx;

					.name {
						font-size: 32rpx;
						line-height: 50rpx;
						color: #4B4B4B;
					}
				}
			}
		}
	}
</style>
